<script lang="ts" setup name="B14WatchEffect">
import { ref /*, watch*/, watchEffect } from "vue";

const temp = ref(10); // 水温
const pos = ref(0); // 水位

function incTemp() {
  temp.value += 10;
}
function incPos() {
  pos.value += 10;
}

/*
watch([temp, pos], (v) => {
  const [t, p] = v;
  if (t >= 60 || p >= 80) {
    console.log("向服务器发送请求");
  }
});
*/

watchEffect(() => {
  if (temp.value >= 60 || pos.value >= 80) {
    console.log("向服务器发送请求");
  }
});
</script>
<template>
  <h1 class="text-xl border-l-8 pl-3">watchEffect</h1>
  <div class="text-gray-400 text-xs my-3">
    当水温达到60；或者水位达到80时，向服务器发送请求。
  </div>
  <div class="my-3">
    <div>水温：{{ temp }}</div>
    <div>水位：{{ pos }}</div>
  </div>
  <div class="flex justify-start items-center gap-x-2">
    <button class="p-1 border shadow" @click="incTemp">水温+10</button>
    <button class="p-1 border shadow" @click="incPos">水位+10</button>
  </div>
</template>
